<!DOCTYPE html>
<html lang="zh"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>朗空智能字帖</title>
	<style>
        @font-face{
            font-family: 'kongbi';
            src : url('./kbzt.ttf');
        }
        body, div, p, ul, li {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        div {
            width: 938px;
            margin: 0 auto;
            padding-left: 2px;
        }

        li {
            display: inline-block;
            width: 80px;
            height: 80px;
            font-family: "楷体", "楷体_gb2312", "Kaiti SC", "STKaiti", "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", "KaiTi", "KaiTi_GB2312", "DFKai-SB", "TW\-Kai", "web-ukai", serif;
            font-size: 58px;
            text-align: center;
            line-height: 80px;
            margin: 5px 0px 5px -2px;
        }

        li.svg {
            line-height: 68px;
        }

        li svg {
            magin: 8px;
            vertical-align: middle;
        }

        .afterpage {
            page-break-before: always;
        }

        .page-head {
            height: 116px;
            line-height: 136px;
            font-size: 32px;
            text-align: center;
            display: none;
        }

        @media print {
            .afterpage {
                page-break-before: always;
            }

            .page-head {
                display: block
            }

            body {
                -webkit-print-color-adjust:exact;
                -moz-print-color-adjust:exact;
                -ms-print-color-adjust:exact;
                print-color-adjust:exact;
            }

            blockquote {
                display: none;
            }
        }

        @page {
            size: auto;
            margin: 5mm 16mm 5mm 16mm;
        }

	</style>
	</head>

	<body>
<center><h4 >朗空智能字帖</h4></center>

	<div class="zi-page">
	<ul id = "lst">
	
	
	</ul>
</div>


<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">


	str = getURLParameter('data');
	ff = getURLParameter('font');
	bg = getURLParameter('bg'); 
	t = getURLParameter('tran');
	fc = getURLParameter('fc');
	x = parseInt(getURLParameter('x'));
	y = parseInt(getURLParameter('y'));
	if (Object.is(x, NaN))
	{
		x = 0;
	}
	if (Object.is(y, NaN))
	{
		y = 0;
	}
	blank = str.length % 16;
	if (blank>0)
	{
		for (i=blank; i<16;i++ )
		{
			str +=" ";
		}
	}
	if (t == null)
	{
		t = '9';
	}
	tran = (t+"00000000000000000000000").split("");

	appendChar(str);
	function appendChar(str){
		for (wd in str)
		{
			var ele = document.createElement('li');
			for ( i=0; i<12; i++)
			{
				var ele = document.createElement('li');
				if (fc == "1")
				{
					r = Math.round(parseInt(tran[i])*(-23)+255);
					g = 255;
					b = Math.round(parseInt(tran[i])*(-23)+255);
				}
				if (fc == "2")
				{
					r = Math.round(parseInt(tran[i])*(-17)+255);
					g = Math.round(parseInt(tran[i])*(-17)+255);
					b = Math.round(parseInt(tran[i])*(-17)+255);
				}
				if (fc == "3")
				{
					r = 255;
					g = Math.round(parseInt(tran[i])*(-20)+255);
					b = Math.round(parseInt(tran[i])*(-20)+255);
				}
				
				if (i == 0)
				{
					r=0;g=0;b=0;
				}
				ele.style = 'background: url(&quot;'+bg+'.svg&quot;) center center no-repeat;color: rgb('+r+', '+g+', '+b+'); font-family:&quot;, &quot;, &quot;楷体&quot;, &quot;楷体_gb2312&quot;, &quot;Kaiti SC&quot;, &quot;STKaiti&quot;, &quot;AR PL UKai CN&quot;, &quot;AR PL UKai HK&quot;, &quot;AR PL UKai TW&quot;, &quot;AR PL UKai TW MBE&quot;, &quot;AR PL KaitiM GB&quot;, &quot;KaiTi&quot;, &quot;KaiTi_GB2312&quot;, &quot;DFKai-SB&quot;, &quot;TW-Kai&quot;, &quot;web-ukai&quot;, serif;';
				if (tran[i]>0 && str[wd] !=" ")
				{
					ele.innerHTML =  '<span style="margin:'+y+'px '+x+'px 0px 0px;">'+str[wd]+'</span>';
				}else{ele.innerHTML = "&nbsp;";}
				
				document.getElementById('lst').appendChild(ele);
			}
		}
			
	}
	function getURLParameter(name) {
		return decodeURIComponent((new RegExp('[?|&]' + name + '=' +	'([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
	}
    function render(ff) {
        $('body').prepend($('#page-head-box').html());
        $('.afterpage').prepend($('#page-head-box').html());
        let herderColor = '#666666';
        $('.page-head').css('color', herderColor);

        let fontFamily = '"'+ff+'","楷体",';
        let hzBg = 'url('+bg+'.svg) center center no-repeat';
        let pyBg = 'url(/zi/images/pyb2.svg)  center center repeat-x';

        $('li').css('background', hzBg);
        $('li').css('font-family', fontFamily + $('li').css('font-family'));

        let typem = '6';
        if (parseInt(typem) === 20) {
            $('li:not(.f)').css('color', '#ffffff');
            $('li:not(.f)').css('text-shadow', '1px 1px #aaaaaa, -1px -1px #aaaaaa,1px -1px #aaaaaa, -1px 1px #aaaaaa');
        }
    }

    render(ff);
    window.onload = function(){
        setTimeout(function(){window.print(); }, 1000);
    }
    const LINE_NUM = 12;

    const pageStyles = {
        'v': [12, 15, 116, 136],
        'h': [12, 7, 80, 92]
    };
    const FILL_TAIL = '1';
    const HAS_PY = false;
    const CAN_CHANGE_PAGE_SIZE = true;
</script>

<style>
    #print-menu {
        width: 80px;
        position: fixed;
        top: 180px;
        right: 0px;
        font-size: 22px;
    }

    #print-menu span, #print-menu select  {
        width: 60px;
        text-align: center;
        display: block;
        padding: 8px 10px;
        background: #efefef;
        border-radius: 6px;
        border: 1px dashed #cccccc;
        cursor: pointer
    }
    #print-menu .change_page_style {
        display: none;
        width: auto;
    }

    #print-menu .print, #print-menu .change_page_style {
        margin-top: 36px;
    }
</style>

<blockquote id="print-menu">
    <span class="print">打  印</span>
</blockquote>
<script type="text/javascript">

    if (CAN_CHANGE_PAGE_SIZE) {
        $('#print-menu .change_page_style').show();
    }

    $("#print-menu .flip").click(function (node, child){
        $('ul').each(function (index,domUl) {
            let arr = [];
            $(domUl).children('li').each(function (indexLi,domLi) {
                let last;
                if ((indexLi + 1) % LINE_NUM === 0) {
                    while (arr.length > 0) {
                        let ele = arr.pop();
                        if (arr.length === LINE_NUM - 2) {
                            last = ele;
                        }
                        $(ele).insertBefore($(domLi));
                    }
                    $(domLi).insertBefore($(last));
                } else {
                    arr.push(domLi);
                }
            });
        });
    });
    $("#print-menu .print").click(function () {
        window.print();
    });

    function fillEmptyLine(lineNum, columnNum, hasPy) {
        if (lineNum ==0) {
            return ;
        }
        for (i = 0; i < lineNum; i++) {
            $('.zi-page-new').last().append($('<ul></ul>'));
            for (j = 0; j < columnNum; j++) {
                let fill = hasPy ? '<li><span class="py-box">&nbsp;</span><span class="hz-box">&nbsp;</span></li>' : '<li class="svg">&nbsp;</li>'
                $('.zi-page-new ul').last().append($(fill));
            }
        }
    }

    $("#print-menu .change_page_style").change(function (){
        let pageStyle = $(this).val();
        $('.afterpage').remove();
        $('.page-head').first().remove();
        let pageStyleData = pageStyle in pageStyles ? pageStyles[pageStyle] : pageStyles['h'];
        let zi = $('ul li');
        $('body').append($('<div class="zi-page-new"><ul></ul></div'));
        let PageZiNum = pageStyleData[0] * pageStyleData[1];
        let lineNum = 0;
        for (i = 1; i <= zi.length; i ++) {
            if (i % pageStyleData[0] === 1 && (zi[i-1].innerHTML === '' || zi[i-1].innerHTML.indexOf('&nbsp;') !== -1)) {
                $('.zi-page-new ul').last().remove();
                break;
            }
            let curLine = $('.zi-page-new ul').last();
            curLine.append(zi[i-1]);

            if (i === zi.length) {
                continue;
            }
            if (i % pageStyleData[0] === 0) {
                $('.zi-page-new').last().append($('<ul></ul>'));
                lineNum ++;
            }

            if (i % PageZiNum === 0) {
                $('body').append($('<div class="afterpage"></div><div class="zi-page-new"></div'));
                $('.zi-page-new').last().append($('<ul></ul>'));
                lineNum = 0;
            }
        }
        if (lineNum === 0) {
            $('.afterpage').last().remove();
            $(".zi-page-new").last().remove();
        } else if(FILL_TAIL === '1') {
            fillEmptyLine(pageStyleData[1] - lineNum, pageStyleData[0], HAS_PY);
        }
        $(".zi-page").remove();
        $(".zi-page-new").addClass('zi-page').removeClass('zi-page-new');

        render();
        $('.page-head').css('height', pageStyleData[2] + 'px').css('line-height', pageStyleData[3] + 'px');
        window.print();
    });
</script>

</body></html>